<template>
	<view class="video_play">
		<image :src="videoObj.img"></image>
		<!-- 工具栏 开始 -->
		<view class="video_tool">
			<view @click="handleMuted" :class="['iconfont',muted?'iconjingyin':'iconshengyin']"></view>
			<view class="iconfont iconzhuanfa">
				<button open-type="share"></button>
			</view>
		</view>
		<!-- 工具栏 结束 -->
		<!-- 视频 开始 -->
		<view class="video_warp">
			<video :muted="muted" :src="videoObj.video" objectFit="fill"></video>
		</view>
		<!-- 视频 结束 -->
		<!-- 下载 开始 -->
		<view class="download">
			<view class="download_btn" @click="handleDownLoad">
				下载高清
			</view>
		</view>
		<!-- 下载 结束 -->
	</view>
</template>

<script>
export default{
	data(){
		return{
			videoObj:{},
			muted:false
		}
	},
	 onLoad() {
	 	console.log(getApp().globalData);
		this.videoObj=getApp().globalData.video
	 },
	 methods: {
	 	handleMuted() {
	 		this.muted=!this.muted
	 	},
		
		//点击下载视频
		async handleDownLoad(){
			await uni.showLoading({
				title:"下载中"
			});
			//1 讲远程文件下载到小程序的内存中tempFilePath
			const {tempFilePath} = (await uni.downloadFile({url:this.videoObj.video}))[1];
			//2 将小程序内存中的临时文件下载到本地上
			await uni.saveImageToPhotosAlbum({filePath:tempFilePath});
			uni.hideLoading();
			await uni.showToast({
				title:"下载成功"
			})
		}
	 }
}
</script>

<style lang="scss" scoped>
	.video_play {
		position: relative;
		image {
			position: absolute;
			height: 100vh;
			width: 100vh;
			filter: blur(20px);
			z-index: -1;
		}
	   .video_tool {
			display: flex;
			justify-content: flex-end;
			height: 80rpx;
			.iconfont {
				width: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				font-size: 50rpx;
				background-color: rgba(0,0,0, .3);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
			}
			.iconzhuanfa{
				position: relative;
				button{
					position: absolute;
					width: 100%;
					height: 100%;
					opacity: 0;
				}
			}
		}
	
		.video_warp {
			display: flex;
			justify-content: center;
			video {
				width: 360rpx;
				height: 600rpx;
				
			}
		}
	
		.download {
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
			.download_btn {
				width: 360rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1px solid #fff;
				font-size: 30rpx;
				color: #fff;
				background-color: rgba(0,0,0, .3);
				
			}
		}
	}
</style>
